<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        //组件的定义
        Vue.component('button-counter', {
            //数据必须是一个函数，而且要返回一个数据对象
            data() {
                return {
                    count:1
                }
            },
            methods: {
                handleClick() {
                    this.count++
                }
            },
            //组件模板
            template: `
            <div>
                <button @click="handleClick"> 你点击了{{count}}次 </button>
            </div>`
        })
        const app = new Vue({
            el: '#app',
            data: {

            },

        })
    </script>
    <script>
        function foo(){
            return {
                x:1
            }
        }
        let obj = { x:1}
        let a = foo()
        let b = foo()
        let c = obj
        let d = obj
    </script>

</body>

</html>